<template>
  <div>
    <h1>三级菜单</h1>
    <!-- <el-tree :data="menus" :props="menusProps" @node-click="handleNodeClick"> -->
    <el-tree :data="menus" :props="menusProps" show-checkbox node-key='catId' :expand-on-click-node="false"
      :default-expanded-keys="expandedKey">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">
            添加
          </el-button>
          <el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
          <el-button type="text" size="mini" @click="() => update(node, data)">
            修改
          </el-button>
        </span>
      </span>
    </el-tree>
    <!-- 新增目录对话框 -->
    <el-dialog title="新增目录" :visible.sync="dialogAddMenuVisible">
      <el-form :model="addCategory">
        <el-form-item label="目录名称" :label-width="formLabelWidth">
          <el-input v-model="addCategory.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddMenuVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategoryMethod">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除目录对话框 -->
    <el-dialog title="修改目录" :visible.sync="dialogUpdateMenuVisible">
      <el-form :model="updateCategory">
        <el-form-item label="目录名称" :label-width="formLabelWidth">
          <el-input v-model="updateCategory.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateMenuVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCategoryMethod">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        menus: [],
        dataListLoading: false,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        menusProps: {
          label: 'name',
          children: 'children'
        },
        expandedKey: [],
        dialogAddMenuVisible: false,
        dialogUpdateMenuVisible: false,
        addCategory: {
          name: '',
          parentCid: 0,
          catLevel: 0,
          showStatus: 1,
          sort: 0
        },
        updateCategory: {

        },
        formLabelWidth: '120px',
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      // 请求地址
      getTreeist() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/product/category/list/tree'),
          method: 'post'
        }).then(({
          data
        }) => {
          // console.log(data);
          console.log(data.list);
          this.menus = data.list;
          this.dataListLoading = false
        })
      },
      // 删除菜单
      delMenu(ids) {
        this.$http({
          url: this.$http.adornUrl('/product/category/delete/'),
          method: 'delete',
          data: this.$http.adornData([ids], false)
        }).then(({
          data
        }) => {
          this.getTreeist();
          console.log("delete menu success");
        })
      },
      append(data) {
        this.dialogAddMenuVisible = true;
        console.log("append ", data);
        this.addCategory.parentCid = data.catId;
        this.addCategory.catLevel = data.catLevel + 1;
        this.addCategory.showStatus = 1;
        this.expandedKey = [data.catId];
      },
      remove(node, data) {
        console.log("remove ", node, data)
        this.$confirm(`确定删除【${data.name}】?`, "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delMenu(data.catId);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.expandedKey = [node.parent.data.catId];
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      addCategoryMethod() {
        console.log("addCategoryMethod():", this.addCategory);
        this.$http({
          url: this.$http.adornUrl('/product/category/save/'),
          method: 'post',
          data: this.$http.adornData(this.addCategory, false)
        }).then(({
          data
        }) => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.getTreeist();
          this.dialogAddMenuVisible = false;
        })
      },
      update(node, data) {
        console.log("update", node, data);
        this.dialogUpdateMenuVisible = true;
      },
      updateCategoryMethod(){
        
      }
    },
    activated() {
      this.getTreeist();
    }
  };
</script>
<style>

</style>
